<template>
    <div class="box2">
        <!-- <p>我是企业端企业中心</p> -->
        <div class="money">
          
           <div style="width:240px;height:200px; display: inline-block;float:left"><img src="@/assets/images/组 2586.png"></div>
             <el-button plain size="mini" style="float:right; margin-right:20px;margin-top:20px">提现设置</el-button>
           <div style="margin-left:250px;margin-top:26px">
              <b>  <span style="font-size:23px;">企业账号余额</span></b>
            <br> <br>
            <span  style="font-size:27px;color:#5CD5C8">3,150</span><span style="color:#5CD5C8">元</span>
            <br><br>
            <el-button @click="dialogFormVisible=true" type="primary" size="mini" plain>充值</el-button>
            <el-dialog title="充值" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="充值金额：" >
                  <el-input style="width:150px" v-model="form.name" autocomplete="off"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;<span>请给银行卡号xxxx xxxx xxxx xxxx xxx转账，并备注机构名称。</span>
                </el-form-item>
                <!-- 11111111111111111111111111111111 -->
                <el-form-item label="打款凭证：">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </el-form-item>
                <!-- 11111111111111111111111111111111 -->
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
           </div>
        </div>
        <div class="notes">
            <!-- 头部 -->

    <div class="menu1">
      <el-menu
       
        class="el-menu-demo"
        mode="horizontal"
        
      >
        <el-menu-item id="el-menu" index="1">消费记录</el-menu-item>
        <el-menu-item id="el-menu" index="2">充值记录</el-menu-item>
      </el-menu>
      <div class="line"></div>
    </div>
    <!-- +++++++++++++++++++++++++++++++++++表格+++++++++++++++++++++++++++++++++++++++++++++++++++= -->
    <div class="table">
      <el-table :data="tableData"  class="tableBox" style="width: 98%">
        <el-table-column prop="numbering" label="任务编号" width="200">
        </el-table-column>
        <el-table-column prop="name" label="任务名称" width="180">
        </el-table-column>
        <el-table-column prop="reward" label="任务奖励" width="170">
        </el-table-column>
        <el-table-column prop="level" label="任务级别" width="175">
           <!-- <el-button @click="gosh" type="primary" size="mini" plain>普通</el-button> -->
        </el-table-column>
        <el-table-column prop="time" label="任务时限" width="155">
        </el-table-column>
        <el-table-column prop="date" label="任务截止时间">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="155">
          <template >
            <el-button
             @click="goxq"
              type="text"
              size="small"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- +++++++++++++++++++分页+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++= -->
    <div class="pag1">
      <div class="block">
        <!-- <span class="demonstration">直接前往</span> -->
        <el-pagination
          background
          
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
        </div>
    </div>
</template>

<script>
export default {
  methods:{
     deleteRow(index, rows) {
        rows.splice(index, 1);
      },
    goxq(){
       this.$router.push('/rwxq');
    },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
  },
  data() {
    return {
       dialogTableVisible: false,
        dialogFormVisible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
      tableData: [
        {
          numbering: "0123456789",
          name: "任务名称",
          reward: "1,000",
          level: "普通",
          time: "3天",
          date: "2016-05-01",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
        
      ],
    };
  },
};
</script>


<style lang="scss">
.tableBox {
  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}
.box2 {
  width: 1250px;
  height: 660px;
  background-color: #E9EEF3;
  /* padding-top: 50px; */
}

#el-menu {
  background-color: white;
}

.menu1 {
  /* background: white; */
//   padding-top: 5%;
  margin-left: 2%;
}
.table {
  padding-top: 10px;
  margin-left: 2%;
}
.pag1 {
  /* margin-top: 4%; */
  /* margin-left: 25%; */
  position: absolute;
  top: 380px;
  left: 24.9%;
}
.money{
    width: 1250px;
    height: 200px;
    background-color: white;
    // border: #D8DCE3 solid 1px;
    position: absolute;
    top: 80px;
    border-radius: 4px;
}
.notes{
    width: 1250px;
    height: 440px;
    background-color: white;
    // border: #D8DCE3 solid 1px;
    position: absolute;
    top: 300px;
    border-radius: 4px;
}
</style>